// 初始化图表
document.addEventListener('DOMContentLoaded', function() {
    // 获取按钮元素
    const monthBtn = document.getElementById('month');
    const yearBtn = document.getElementById('year');
    
    // 绑定月按钮点击事件
    monthBtn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.chart-btn').forEach(btn => btn.classList.remove('active'));
        this.classList.add('active');
        // 加载月度数据
        loadStatCardsData('month');
    });
    
    // 绑定年按钮点击事件
    yearBtn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.chart-btn').forEach(btn => btn.classList.remove('active'));
        this.classList.add('active');
        // 加载年度数据
        loadStatCardsData('year');
    });
    
    // 初始加载月度数据
    loadStatCardsData('month');
});

// 加载统计卡片数据（修改参数传递）
function loadStatCardsData(timeRange) {
    $.ajax({
        url: "backData.do",
        type: "POST",
        data: {
            action: "videoTrend",
            timeRange: timeRange  // 直接传递时间范围参数
        },
        success: function(data) {
            updateStatCards(data);
            // 渲染视频趋势表格（确保使用正确的数据）
            if (data && data.videoTrend) {
                updateVideoTable(data);
            }
            // 渲染视频状态分布表格
            if (data && data.videoStatus && data.videoStatus.length > 0) {
                renderStatusTable(data.videoStatus);
            }
        }
    });
}

// 视频趋势表格渲染函数
function updateVideoTable(data) {
    const tableContainer = document.querySelectorAll('.chart-container')[0];
    if (!tableContainer) {
        console.error("找不到视频发布趋势表格容器");
        return;
    }
    
    let tableHtml = `
        <table class="trend-table">
            <thead>
                <tr>
                    <th class="trend-header trend-date">日期</th>
                    <th class="trend-header trend-count">发布数量</th>
                </tr>
            </thead>
            <tbody>
    `;
    
    // 提取视频趋势数据（确保使用 data.videoTrend）
    const dataToProcess = data && data.videoTrend ? data.videoTrend : [];
    
    dataToProcess.forEach((item, index) => {
        try {
            const { date, count } = item;
            if (!date || count === undefined) {
                console.warn(`第 ${index + 1} 条数据缺少必要字段`);
                return;
            }
            
            const rowClass = date.endsWith('汇总') ? 'trend-summary-row' : 'trend-row';
            tableHtml += `
                <tr class="trend-row ${rowClass}">
                    <td class="trend-date">${date}</td>
                    <td class="trend-count">${count}</td>
                </tr>
            `;
            
        } catch (error) {
            console.error(`处理第 ${index + 1} 条数据时出错:`, error);
            tableHtml += `
                <tr class="error-row">
                    <td colspan="2">数据解析错误</td>
                </tr>
            `;
        }
    });
    
    tableHtml += `
            </tbody>
        </table>
    `;
    tableContainer.innerHTML = tableHtml;
}
// 更新统计卡片
function updateStatCards(data) {
    // 更新视频总数
    if(data && data.statVideo !== undefined) {
        let formattedVideoCount = new Intl.NumberFormat().format(data.statVideo);
        document.getElementById('statVideo').textContent = formattedVideoCount;
    }
    
    // 更新弹幕数
    if(data && data.content !== undefined) {
        const formattedContentCount = new Intl.NumberFormat().format(data.content);
        document.getElementById('content').textContent = formattedContentCount;
    }
    
    // 更新待审视频
    if(data && data.videoPlay !== undefined) {
        let formattedValue = new Intl.NumberFormat().format(data.videoPlay);
        document.getElementById('videoPlay').textContent = formattedValue;
    }
    
    // 更新总评论
    if(data && data.allComment !== undefined) {
        let formattedValue = new Intl.NumberFormat().format(data.allComment);
        document.getElementById('allComment').textContent = formattedValue;
    }
}

// 渲染状态表格
function renderStatusTable(statusData) {
    // 选择第二个图表容器（视频状态分布）
    const tableContainer = document.querySelectorAll('.chart-container')[1];
    
    // 如果找不到第二个容器，退出函数
    if (!tableContainer) {
        console.error("找不到视频状态分布表格容器");
        return;
    }
    
    let tableHtml = `
        <table class="status-table">
            <thead>
                <tr>
                    <th class="status-header status-name">视频状态</th>
                    <th class="status-header status-percent">占比</th>
                </tr>
            </thead>
            <tbody>
    `;
    
    // 定义状态样式映射
    const statusStyles = {
        "0": { name: "未审核", class: "published", color: "#3b82f6" },
        "1": { name: "已审核", class: "draft", color: "#f97316" },
        "2": { name: "已删除", class: "reviewing", color: "#10b981" }
    };
    
    // 添加数据行
    statusData.forEach((item) => {
        const status = String(item.status);
        const statusStyle = statusStyles[status] || { name: `状态${status}`, class: "", color: "#9ca3af" };
        tableHtml += `
            <tr class="status-row">
                <td class="status-name ${statusStyle.class}" style="color: ${statusStyle.color}">${statusStyle.name}</td>
                <td class="status-percent">${item.percentage}%</td>
            </tr>
        `;
    });
    
    tableHtml += `
            </tbody>
        </table>
    `;
    
    tableContainer.innerHTML = tableHtml;
}